<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1100px">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item label="费用类别" prop="feeCategoryId">
          <el-select
            v-model="queryParams.feeCategoryId"
            placeholder="请输入费用类别"
            :clearable="true"
          >
            <el-option
              v-for="dict in feeCategoryList"
              :key="dict.id"
              :label="dict.categoryName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="FeeRechargeFlow"
        height="500"
        @page-change="getPage"
      />
    </ContentWrap>
  </Dialog>
</template>
<script setup name="FeeRechargeFlow" lang="ts">
import * as FeeRechargeApi from '@/api/fee/feeRecharge'
import * as FeeCategoryApi from '@/api/fee/feeCategory'
const dialogTitle = ref('预充值费用流水')
const dialogVisible = ref(false)
const feeCategoryList = ref()
const queryFormRef = ref()
const queryParams = ref({
  name: undefined,
  feeCategoryId: undefined
})
const queryData = ref()
const columns = [
  {
    label: '姓名',
    prop: 'elder.name'
  },
  {
    label: '身份证号',
    prop: 'elder.identityCard'
  },
  {
    label: '手机号',
    prop: 'elder.mobile'
  },
  {
    label: '费用类别',
    prop: 'feeCategoryId',
    formatter: ({ feeCategoryId }) =>
      feeCategoryList.value.find((obj) => obj.id === feeCategoryId).categoryName
  },
  {
    label: '前费用',
    prop: 'beforeFee'
  },
  {
    label: '费用',
    prop: 'fee'
  },
  {
    label: '后费用',
    prop: 'afterFee'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
const open = async () => {
  feeCategoryList.value = await FeeCategoryApi.listQuery()
  getPage()
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await FeeRechargeApi.pageQueryFlow(queryParams.value)
}
</script>
